<template>
	<view>
		<view class="view-top">
			<!--电影轮播-->
			<view>
				<swiper class="swiper" :circular="true" :indicator-dots="false" :autoplay="true" :interval="3000"
					:duration="300">
					<swiper-item v-for="item in lunbo" class="swiper-item" @tap="play(item,1)">
						<image :src="item.vod_pic" mode="aspectFill"></image>
						
						<view class="live row">
							<text>【{{item.vod_name}}】</text>
							<text style="margin-left: 15rpx;">{{item.vod_tag}}</text>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="yinying row" style="margin: 20rpx;">
				
				
				
				<view class='icon2 row ' style='margin-top: 60rpx;'>
					<view @tap="ntourl('../nearby/nearby')">
						<image  src='../../static/video/V1.png' mode=''></image>
						<text :style="'color:'+ fontcolor">电影分类</text>
					</view>
					<view @tap="ntourl('../preferred/preferred')">
						<image  src='../../static/video/v2.png' mode=''></image>
						<text :style="'color:'+ fontcolor">经典排行</text>
					</view>
					<view>
						<image @tap="ntourl('../settled/settled')" src='../../static/video/v3.png' mode='' ></image>
						<text :style="'color:'+ fontcolor">热播排行</text>
					</view>
					<view @tap="ntourl('../Collarroll/Collarroll')">
						<image src='../../static/video/v4.png' mode=''></image>
						<text :style="'color:'+ fontcolor">追剧中心</text>
					</view>
				</view>
				<view style='height: 50rpx;'></view>
				
				
				
				<view>
					<view class="row" style="margin: 20rpx;" >
					   <text style="color: #7b42e0;font-size: 30rpx;font-weight: 700;" >相册/视频  </text>
					</view>	
				</view>
				<scroll-view :scroll-x="true" class="scroll-view" style="margin: 20rpx;">
				    <image  :src="item.vod_pic" v-for="(item,index) in lunbo" :key="index"  mode="aspectFill"></image>
				</scroll-view>
				</view>	
			</view>
			
			<!--电影轮播-->

			<!--电影搜索框-->
			<view class="search">
				<view @tap="search" class="iconfont sotext">&#xe620;输入关键词搜索...</view>
			</view>
			<!--电影搜索框-->


            <!--技师相册/视频/动态-->
            
			
			<!--影视导航
				<scroll-view :scroll-x="true" class="scroll-view" style="margin-top:30rpx;padding: 0 10rpx;">
					<view class="tab_top">
						<view class="row" v-if="item.type_id<36" v-for="(item,index) in vodtab" @tap="tabtap(item,index)">
							<view style="margin-top: -6rpx;font-size: 40rpx;font-weight: 700;padding: 1rpx 15rpx;" class="colorarea fonts"
								:class="vodtitle == item.type_name ? 'show' : ''">{{item.type_name}}</view>
						</view>
					</view>
				</scroll-view>
				-->



		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				class_type: 1,
				vodtab: [],
				arealist: [],
				yearlist: [],
				dsjclass: [],
				dy_classlist: [],
				dsj_classlist: [],
				lunbo: [],
				lists: [],
				newinidex: 0,
				classbg: {},
				load: true,
				list: [],
				dsjlist: [],
				type: '',
				typshaixuan: '',
				vodtitle: '',
				tabbar: 0,
				vodclass: '',
				vodarea: '',
				vodyear: '',
				voddsj: '',
				dsjclassshow: ''
			}
		},
		computed: {
			user() {
				return this.$store.state.userinfo;
			}
		},
		onLoad(data) {
			plus.navigator.closeSplashscreen();
			this.newinidex = 0;
			this.GetJson(this.ip + 'setapp.php', 'GET', {}, e => {
				this.vodtab = e.vodtab;
				this.dy_classlist = e.dy_classlist;
				this.dsj_classlist = e.dsj_classlist;
				this.arealist = e.arealist;
				this.yearlist = e.yearlist;
				this.dsjclass = e.dsjclass;
				this.vtitle = e.vtitle;
			})
			uni.getStorage({
				key: 'maindata',
				success: (e) => {
					this.lunbo = e.data.lunbo;
					this.$nextTick(function() {
						plus.navigator.closeSplashscreen();
					})
				}
			})
			this.GetJson(this.ip + 'vtag.php', 'POST', {}, e => {
				this.lists = e.lists;
			})
			this.getlunbo();

		},
		onReady() {
			let name = {
				'type_id': '1',
				'type_name': '电影'
			};
			this.$set(this, 'vodtitle', '电影')
			this.tabtap(name, this.newindex);
		},
		onUnload() {

		},
		methods: {
			tabtap(item, index) {
				if (item.type_name == '电影') {
					this.class_type = 1;
				} else if (item.type_name == '电视剧') {
					this.class_type = 2;
				} else if (item.type_name == '综艺') {
					this.class_type = 3;
				} else if (item.type_name == '动漫') {
					this.class_type = 4;
				} else if (item.type_name == '动画片') {
					this.class_type = 5;
				} else {

				}
				this.area = '全部';
				this.pid = item.type_id;
				this.vodtypename = '全部';
				this.vodtypeyear = '全部';
				this.$set(this, 'vodarea', '全部')
				this.$set(this, 'vodclass', '全部')
				this.$set(this, 'vodyear', '全部')
				this.$set(this, 'voddsj', '全部')
				this.$set(this, 'dsjclassshow', '全部')
				this.$set(this, 'vodtitle', item.type_name)
				this.getdata(true);
				//console.log('分类名称:' + item.type_name + 'class:' + this.class_type + '年代：'+this.vodtypeyear)
				//console.log('id:' + item.type_id + 'num:' + index)
			},

			vod_area(item, index) {
				this.$set(this, 'vodarea', item)
				this.area = item;
				this.getdata(true);
			},
			vod_class(item, index) {
				this.$set(this, 'vodclass', item)
				this.vodtypename = item;
				this.getdata(true);
			},
			vod_year(item, index) {
				this.$set(this, 'vodyear', item)
				this.vodtypeyear = item;
				this.getdata(true);
			},
			voddsj_class(item, index) {
				this.$set(this, 'voddsj', item)
				this.area = item;
				this.getdata(true);
			},
			voddsj_type(item, index) {
				this.$set(this, 'dsjclassshow', item)
				this.vodtypename = item;
				this.getdata(true);
			},
			getdata(is) {
				//console.log('id:' + this.pid + ',' + '地区：' + this.area + ',' + '电影分类：' + this.vodtypename+ '年代：'+this.vodtypeyear)
				if (is === true) this.list = [];
				this.load = true;
				let sign = this.md5(this.user.token);
				this.GetJson(this.ip + 'vlist.php', 'POST', {
					token: this.user.token,
					num: this.list.length,
					sign: sign,
					pid: this.pid,
					area: this.area,
					vodclass: this.vodtypename,
					vodyear: this.vodtypeyear,
				}, e => {
					//console.log(e.list)
					this.load = false;
					uni.stopPullDownRefresh();
					if (this.isdata(e)) {
						this.list = [...this.list, ...e.list];
					}
				})
			},
			getdatas(is) {
				this.load = true;
				this.GetJson(this.ip + 'indexlist.php', 'POST', {}, e => {
					this.lunbo = e.lunbo;
					this.load = false;
					uni.stopPullDownRefresh();
					if (!plus.navigator.hasSplashscreen()) plus.navigator.closeSplashscreen();
					uni.setStorage({
						key: 'maindata',
						data: e
					})
				})
			},
			getlunbo() {
				this.GetJson(this.ip + 'vlunbo.php', 'POST', {}, e => {
					uni.stopPullDownRefresh();
					this.lunbo = e.lists;
				})
			},
			search() {
				uni.navigateTo({
					url: '../sou/sou?type=2',
					animationType: 'fade-in'
				})
			},
			jilu() {
				uni.navigateTo({
					url: '../wode/record/record',
					animationType: 'fade-in'
				})
			},
			play(item, type) {
				this.$store.state.vod_url = item.vod;
				uni.navigateTo({
					url: '../play/vplay?data=' + item + '&play=' + item.vod_play_url + '&zuanshi=' + item
						.vod_points_play + '&playname=' + item.vod_name + '&playimg=' + item.vod_pic +
						'&playtime=' + item.vod_remarks + '&playclass=' + item.vod_class + '&id=' + item.vod_id +
						'&text=' + item.vod_blurb + '&yanyuan=' + item.vod_actor + '&daoyan=' + item.vod_director +
						'&diqu=' + item.vod_area + '&nianfen=' + item.vod_year + '&pingfen=' + item.vod_score +
						'&type=' + type
				})
			}
		},
		onReachBottom() {
			if (this.load == false) this.getdata('is')
		},

		onPullDownRefresh() {
			this.getdata(true);
			this.getlunbo();
		}
	}
</script>

<style>
	page {
		background-color: #181b2e;
	}

	.view-top {
		background: linear-gradient(45deg, #181b2e, #181b2e, #181b2e);
		width: 750rpx;
		height: 400rpx;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 2;
	}

	.search {
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 10rpx;
		margin: 20rpx;
		height: 70rpx;
		width: 710rpx;
		margin-top: 90rpx;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 1;
	}

	.sotext {
		margin-top: 15rpx;
		margin-left: 15rpx;
		color: #ffffff;
		font-size: 30rpx;
	}

	.jiconfont {
		margin-top: 91rpx;
		margin-left: 670rpx;
		color: #FFFFFF;
		font-size: 60rpx
	}

	.swiper {
		height: 610rpx;
		width: 100%;
	}

	.swiper-item>image {
		width: 100%;
		height: 610rpx;
	}
	.scroll-view {
		height: 320rpx;
		width: 100%;
		white-space: nowrap;
	}
	
	.scroll-view image {
		width: 165rpx;
		height: 200rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
		display: inline-block;
	}
    .vodimg {
    	display: inline-block;
    	text-align: center;
    	width: 750rpx;
    	height: 80rpx;
    	font-size: 35rpx;
    	font-weight: 700;
    	line-height: 70rpx;
    	font-size: 18px;
    	color: #ffffff;
    	/*background-color: rgba(0, 0, 0, 0.2);*/
    	position: absolute;
    	top:160rpx;
    	left: 0rpx;
    	z-index: 99;
    }
	.live {
		display: inline-block;
		text-align: center;
		width: 750rpx;
		height: 80rpx;
		font-size:28rpx;
		font-weight: 700;
		line-height: 70rpx;
		color: #ffffff;
		/*background-color: rgba(0, 0, 0, 0.2);*/
		position: absolute;
		top: 530rpx;
		left: 0rpx;
		z-index: 99;
	}
    .live>text{
		font-size: 28rpx;
		color: #FFF;
    }
    .yinying {
    	display: inline-block;
    	text-align: center;
    	width: 710rpx;
		border-radius: 20rpx;
    	height: 300rpx;
    	font-size:28rpx;
    	font-weight: 700;
    	line-height: 70rpx;
    	color: #ffffff;
    	background:linear-gradient(to bottom,rgba(10,11,20,0),rgba(10,11,20,0),rgba(10,11,20,0.1),rgba(10,11,20,0.2),rgba(10,11,20,0.3),rgba(10,11,20,0.4),rgba(10,11,20,0.5),rgba(10,11,20,0.6),rgba(10,11,20,0.7),rgba(10,11,20,0.8),rgba(10,11,20,0.9),rgba(10,11,20,1));
    	position: fixed;
    	left: 0;
    	right: 0;
    	top: 610rpx;
    	z-index: 9999;
    }
    .icon2 {
    	padding: -20rpx;
        justify-content: space-around;
    }
    
    .icon2>view {
    	border-radius: 20rpx;
    	margin-top: -20rpx;
    	display: flex;
    	flex-direction: column;
    	align-items: center;
    }
    
    .icon2>view>image {
    	width: 90rpx;
    	height: 90rpx;
    	display: block;
    	margin-bottom: 22rpx;
    }
    
    .icon2>view>text {
    	font-weight: 700;
    	font-size: 27rpx;
    }
    














	.fonta {
		background-image: linear-gradient(to right, #521fad, #7b42e0, #521fad);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.fontb {
		background-image: linear-gradient(to right, #7b42e0, #7b42e0);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.fonts {
		background-image: linear-gradient(to right, #FE6191, #FB6794, #F98DAD);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.fontc {
		background-image: linear-gradient(to right, #6b45aa, #7649c0, #6b45aa);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.font {
		background-image: linear-gradient(to right, #f93bd7, #FE82E3, #FC5A8B);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
</style>